import React, { useEffect, useState } from "react";
interface IndexProps {
  timesay: string;
  name: string;
  describe: Array<string>;
  imgs: string;
  bgcolors: string;
  widths: number;
  height: number;
  colors: string;
}
const Index: React.FC<IndexProps> = ({
  name,
  timesay,
  describe,
  imgs,
  bgcolors,
  widths,
  height,
  colors,
}) => {
  const [show, setShow] = useState("block");
  useEffect(() => {
    setShow(widths > 300 ? "block" : "none");
  }, [widths]);
  return (
    <div
      style={{
        width: widths,
        height: height,
        background: bgcolors,
        display: "flex",
        borderRadius: 8,
        position: "relative",
      }}
    >
      <div>
        <div style={{ margin: 20 }}>
          <div style={{ color: colors, fontSize: 18, fontWeight: 600 }}>
            {name}
          </div>
          <div style={{ color: colors, fontSize: 14 }}>{timesay}</div>
        </div>
        <div style={{ display: show }}>
          <div style={{ marginTop: 60, display: "flex" }}>
            {describe.map((item, index) => {
              return (
                <div
                  key={index}
                  style={{
                    marginLeft: 17,
                    color: "#000",
                    background: "#fff",
                    padding: "3px 6px 3px 6px",
                    borderRadius: 8,
                    fontSize: 12,
                  }}
                >
                  {item}
                </div>
              );
            })}
          </div>
        </div>
      </div>
      <div style={{ position: "absolute", right: 0, bottom: 0 ,marginRight:-10}}>
        <img src={imgs} alt="" />
      </div>
    </div>
  );
};

export default Index;
